<template>
    <div>
       <h2>Products</h2>
        <ul>
            <li v-for="p in products">
                {{ p.title }} - {{ p.price | currency }}
                <br>
                <el-button
                        :disabled="!p.inventory"
                        @click="addToCart(p)">
                    Add to cart
                </el-button>
            </li>
        </ul>
    </div>
</template>
<script>
    import { mapGetters, mapActions } from 'vuex'

    export default {
        computed: mapGetters({
            products: 'allProducts'
        }),

        methods: mapActions([
            'addToCart'
        ]),

        created () {
            this.$store.dispatch('getAllProducts')
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/scss" type="text/css">
    button{
        margin-top: .5vw;
    }
    li{
        margin-top: .5vw;
    }
</style>